為了之後可以建立 中藥NFT盲盒 並且導入我們的 元宇宙中藥鋪
所以開始建立一個 lab

動態讀取遠端 Gltf 素材

import { useLoader, useThree } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { Suspense } from 'react'
import * as THREE from 'three'
import { useGLTF, Clone, MeshDistortMaterial, OrbitControls, Bounds, BakeShadows, TransformControls, Html } from '@react-three/drei'

export default function GltfScene(props) {
  // const gltf = useGLTF('https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb')
  const gltf = useGLTF(props.model)

  const cloneScene = gltf.scene.clone()

  var mroot = cloneScene
  var bbox = new THREE.Box3().setFromObject(mroot)
  var cent = bbox.getCenter(new THREE.Vector3())
  var size = bbox.getSize(new THREE.Vector3())

  //Rescale the object to normalized space
  var maxAxis = Math.max(size.x, size.y, size.z)
  mroot.scale.multiplyScalar(1.0 / maxAxis)
  bbox.setFromObject(mroot)
  bbox.getCenter(cent)
  bbox.getSize(size)
  //Reposition to 0,halfY,0
  mroot.position.copy(cent).multiplyScalar(-1)
  mroot.position.y -= size.y * 0.5

  // const { nodes } = useLoader(GLTFLoader, )
  return (
    <Suspense fallback={null} scale={1}>
      <primitive scale={10} receiveShadow castShadow object={cloneScene} />

      {/* <primitive scale={10} receiveShadow castShadow object={gltf.scene} /> */}
      <mesh position={[0, 0, 0]} scale={5 * 2}>
        <boxBufferGeometry />
        <meshStandardMaterial opacity={0.1} transparent color="#A2A2cA" />
      </mesh>
    </Suspense>
  )
}

// export default function GLTFModel(props: GLTFModelProps) {
//   const gltf = useGLTF(props.model);
//   return <primitive object={gltf.scene} />;
// }

// <Canvas>
//  <Suspense fallback={null}>
//     <GLTFModel model={glbUrl}/>
//  </Suspense>
// </Canvas>

function _GltfScene() {
  const gltf = useLoader(GLTFLoader, 'https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb')
  const { nodes, materials } = gltf
  const { scene } = useThree()
  // materials["UnitBox"]

  const cloneScene = gltf.scene.clone()
  return (
    <Suspense fallback={null} scale={1}>
      {/* <Clone>
        <primitive object={cloneScene} />
      </Clone> */}
      <Clone>
        <primitive object={cloneScene} />
      </Clone>
      {/* <primitive object={gltf.scene} /> */}
      {/* <Clone object={gltf.scene} /> */}
      <mesh position={[0, 0, 0]} scale={5}>
        <boxBufferGeometry />
        <meshStandardMaterial color="#A2A2cA" />
      </mesh>
    </Suspense>
  )
}